<!--
  @desc: tab切换
  @author: lanbao
-->
<template>
  <div class="TabBar md-example-child md-example-child-tabs md-example-child-tab-bar-2">
    <md-tab-bar
      v-model="current"
      :items="items"
      :maxLength="5"
      :hasInk="false"
      @change="onChange"
    />
  </div>
</template>

<script>
import {TabBar} from 'mand-mobile'

export default {
  name: 'tab-bar',
  props: {
    items: Array
  },
  data () {
    return {
      current: 1
    }
  },
  components: {
    [TabBar.name]: TabBar
  },
  methods: {
    onChange (item, index, prevIndex) {
      this.$emit('getIndex', index)
    }
  }
}
</script>
<style lang="stylus" scope>
  .TabBar .md-tab-bar
    padding 0
    .md-tab-bar-item
      color #333
      &.is-active
        background yellow
        font-weight 400
</style>
